<template>
  <div class="orde-container">
    <template>
      <el-table :data="orderData" border style="width: 100%">
        <el-table-column
          prop="orderDetail"
          align="center"
          label="产品图片"
          width="140"
        >
          <!-- 插槽作用域 -->
          <template v-slot="scope">
            <el-avatar
              shape="square"
              :size="70"
              fit="scale-down"
              :src="scope.row.orderDetail[0].imageUrl"
            >
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="order_id"
          label="订单编号"
          width="280"
        ></el-table-column>
        <el-table-column
          prop="orderDetail[0].productName"
          label="产品名称"
          width="160"
        ></el-table-column>
        <el-table-column prop="orderDetail[0].quantity" width="120" label="数量">
        </el-table-column>
        <el-table-column prop="total_fee" label="总价(元)" width="160"> </el-table-column>
        <el-table-column prop="pay_status" label="支付状态">
          <template v-slot="{ row }">
            {{ row.pay_status === 1 ? "已支付" : "未支付" }}
          </template>
        </el-table-column>
        <el-table-column prop="order_status" label="订单状态">
         <template v-slot="{ row }">
            <span v-if="row.order_status==0">未提交</span>
            <span v-else-if="row.order_status==1">提交成功</span>
            <span v-else-if="row.order_status==2">已取消</span>
            <span v-else-if="row.order_status==3">无效订单</span>
            <span v-else-if="row.order_status==4">交易关闭</span>
            <span v-else-if="row.order_status==5">退货</span>
         </template>
        </el-table-column>
        <el-table-column prop="opration" label="操作">
          <template v-slot="{ row }">
            <el-button
              v-hasPay="[row.pay_status,row.order_status]"
              type="primary"
              class="btn"
              icon="iconfont icon-VIPchongzhi-"
              >去支付
            </el-button>
            <el-button type="danger" class="btn" icon="el-icon-delete">
              删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  directives: {
    hasPay: {
      inserted(el, binding) {
        // console.log(binding);
        // 指令接收的是用户的支付状态
        // 0未支付 显示去支付按钮
        // 1已支付 禁用去支付按钮
        // 接收到的参数是一个数组[pay_sataus,order_status]
        let [pay_status,order_status] = binding.value || 0;
        //先保存当前按钮的类名
        let className = el.className;
        // 当pay_status不是0的时候，order_status不是1的时候禁用按钮
        // order_status  0未提交 1已提交 2已取消 3无效订单 4交易关闭 5退货
        if (pay_status !== 0 ||order_status !== 1) {//只要状态不为0，就不能支付
          el.disabled = true;//禁用按钮
          el.className = className + " " + "is-disabled";
        }
      },
    },
  },
  computed: {
    ...mapState(["orderData"]),
  },
  methods: {
    ...mapActions(["GET_ORDER_DATA"]),
  },
  created() {
    this.GET_ORDER_DATA();
  },
  data() {
    return {};
  },
};
</script>
<style scoped lang="less">
.el-avatar{
    /deep/ img{
      width: 100%;
     
    }
     height: 30px!important;
     background-color: #fff;
  }
/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
}
</style>
